<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8"/>
</head>
<body>
<div id="t"></div>

<textarea id="tpl" style="display: none;">
    {{#list list as l}}
    <div>
        {{#list l.key as k}}
        <label>
            <input type="checkbox" name={{l.name}} value={{k.value}} checked={{k.selected}}
                   on-click={{this.combine($event,k)}}/>
            <i>{{k.name}}</i>
        </label>
        {{/list}}
    </div>
    {{/list}}

    <div style="color:red">
        <table>
            <tbody>
            {{#list s as t}}
            <tr>
                <td>{{t.name}}</td>
                <td><input type="text" r-model="{{t.price}}"/></td>
            </tr>
            {{/list}}
            </tbody>
        </table>
    </div>
</textarea>
<script src="regularjs/dist/regular.js"></script>
<script>

    var priceCache = {};
    var priceDefault = [{name: '', price: ''}];
    var t = Regular.extend({
        template: document.getElementById('tpl').value,
        config: function (data) {
            data.s = priceDefault;
            // this.combine();
        },
        combine: function ($event, key) {
            var _array = [], combine, data = this.data, s;
            if ($event) key.selected = $event.target.checked;

            data.list.forEach(function (item) {
                var _selects = item.key.filter(function (it) {
                    return !!it.selected
                });
                if (!!_selects.length) _array.push(_selects);
            });

            function _combineArray(arr) {
                if (arr.length == 0) return [];
                if (arr.length == 1) return arr[0];
                var _res = [];
                var _rest = arguments.callee(arr.slice(1));
                _rest.forEach(function (item) {
                    arr[0].forEach(function (it) {
                        var _name = it.name + item.name;
                        var _keys = it.value + ',' + item.value;
                        var _price = priceCache[_name] || {name: _name, value: _keys, price: ''};
                        _res.push(_price);
                    });
                });
                return _res;
            }

            combine = _combineArray(_array);
            s = combine.length ? combine : priceDefault;
            // 写入缓存
            s.forEach(function (item) {
                item.keys = ((item.value + '').split(','));
                priceCache[item.name] = item;
            });
            console.log(priceCache);
            data.s = s;
        }
    });
    // , selected: true
    var t1 = new t({
        data: {
            list: [
                {
                    name: "value1",
                    key: [{value: 1, name: '黑色'}, {value: 2, name: '白色'}]
                },
                {
                    name: "value2",
                    key: [{value: 3, name: 'M'}, {value: 4, name: 'X'}, {value: 5, name: 'L'}]
                },
                {
                    name: "value3",
                    key: [{value: 6, name: '配置1'}, {value: 7, name: '配置2'}, {value: 8, name: '配置3'}]
                }
            ]
        }
    }).$inject('#t');
</script>
</body>
</html>
